<template>
	<view class="pwdmodal">
		<!-- 遮罩层 -->
		<view class="mask" v-if="show"></view>
		<!-- 弹出层 -->
		<view class="modalDlg" v-if="show">
			<view class="title">
				<text>请输入密码</text>
				<view class="closed" @click="show = false">
					<text class="close_icon">×</text>
				</view>
			</view>
			<view>
				金额
			</view>
			<view class="money">
				￥{{payprice}}
			</view>
			<input name="password" v-model="password" :adjust-position='false' :hold-keyboard='true' type="number"
			 class='hide_ipt' :maxlength="Length" :focus="isFocus" @input="input"></input>

			<view class="inputs" @click="wakeUp">
				<view class="pwd_ipt" v-for="(i,index) in mdlist" :key="index">{{i}}</view>
			</view>
			<view class="forget">
				忘记密码？点击
				<text @click="resetPwd">重置</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pwdmodal",
		props: {
			reset: {
				type: Boolean,
				value: false
			},
			payprice: {
				type: String,
				value: ""
			}
		},
		data() {
			return {
				isFocus: true,
				password: "",
				mdlist: ['', '', '', '', '', ''],
				Length: 6, //输入框个数
				show: false,

			}
		},
		watch: {
			
		},
		onShow() {
			this.focus();
		},
		methods: {
			init(data) {
				this.show = data;
				this.resetData();
			},
			focus() {
				this.isFocus = true;
			},
			wakeUp() {
				this.focus();
			},
			input() {
				if (this.password.length <= 6) {
					this.mdlist = Array.from(new Array(this.password.length)).fill('●');
					this.mdlist = this.mdlist.concat(Array.from(new Array(6 - this.password.length)).fill(''));
				}
				if (this.password.length == 6) {
					this.$emit('isPassword', this.password);
				}
			},
			// 重置输入框
			resetData() {
				this.isFocus = true;
				this.password = "";
				this.mdlist = ['', '', '', '', '', ''];
			},
			// 重置密码
			resetPwd() {
				uni.navigateTo({
					url: '/pagesA/my/userinfo/editPwd'
				})
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../my/my.scss";

	/* 遮罩层 */
	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		z-index: 11;
		opacity: 0.5;
	}

	/* 弹出层 */
	.modalDlg {
		box-sizing: border-box;
		width: 92%;
		position: fixed;
		top: 15%;
		left: 4%;
		right: 4%;
		transform: translate(0, -15%);
		z-index: 12;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #616161;
		font-size: 26rpx;
		padding: 30rpx 30rpx 50rpx;
	}

	.title {
		width: 100%;
		position: relative;
		color: #0B0B0D;
		font-size: 36rpx;
		font-weight: 500;
		text-align: center;
		margin-bottom: 60rpx;

		.closed {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			font-weight: normal;
			right: 0;
			top: -4rpx;
			color: #979797;
		}

		.close_icon {
			width: 24rpx;
			height: 24rpx;
		}
	}


	.money {
		color: #0B0B0D;
		font-size: 36rpx;
		margin: 12rpx 0 50rpx;
		font-weight: 500;
	}

	.forget {
		width: 100%;
		color: #070707;
		font-size: 24rpx;
		text-align: right;

		text {
			color: #84B065;
		}
	}

	.inputs {
		width: 100%;
		@include flexLayout(center, center);
		border: 2rpx solid #E1E1E1;
		margin-bottom: 36rpx;

		.pwd_ipt {
			width: 16.7%;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			color: #000000;
		}

		.pwd_ipt:not(:first-child) {
			border-left: 2rpx solid #E1E1E1;
		}
	}

	.hide_ipt {
		width: 200%;
		height: 120rpx;
		position: absolute;
		left: -200rpx;
		bottom: 108rpx;
		z-index: 1;
		opacity: 0;
		background-color: transparent;
		color: transparent;
		caret-color: transparent;
	}
</style>
